import { createWebHashHistory, createRouter } from 'vue-router'

import Index from '@/views/index/index.vue'
import News from '@/views/news/index.vue'
import NewsDetail from '@/views/news/detail.vue'
import MyPinia from '@/views/pinia/index.vue'
import Props from '@/views/comm/props/index.vue'
import CustomEvent from '@/views/comm/customEvent/parent.vue'
import Mitt from '@/views/comm/mitt/parent.vue'
import VModel from '@/views/comm/vModel/parent.vue'
import Grand from '@/views/comm/grand/parent.vue'
import Refs from '@/views/comm/refs/parent.vue'
import Provide from '@/views/comm/provide/parent.vue'
import Slot from '@/views/comm/slot/parent.vue'
import CustomRef from '@/views/customRef/index.vue'
import Teleport from '@/views/teleport/index.vue'
import Suspense from '@/views/suspense/index.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/pinia',
      name: 'pinia',
      component: MyPinia
    },
    {
      path: '/props',
      name: 'props',
      component: Props
    },
    {
      path: '/customEvent',
      name: 'customEvent',
      component: CustomEvent
    },
    {
      path: '/mitt',
      name: 'mitt',
      component: Mitt
    },
    {
      path: '/vModel',
      name: 'vModel',
      component: VModel
    },
    {
      path: '/grand',
      name: 'Grand',
      component: Grand
    },
    {
      path: '/refs',
      name: 'Refs',
      component: Refs
    },
    {
      path: '/customRef',
      name: 'CustomRef',
      component: CustomRef
    },
    {
      path: '/provide',
      name: 'Provide',
      component: Provide
    },
    {
      path: '/teleport',
      name: 'Teleport',
      component: Teleport
    },
    {
      path: '/slot',
      name: 'Slot',
      component: Slot
    },
    {
      path: '/suspense',
      name: 'Suspense',
      component: Suspense
    },

    {
      path: '/news',
      name: 'news',
      component: News,
      children: [
        {
          path: 'detail/:id',
          name: 'newsDetail',
          component: NewsDetail,
          props: true
        }
      ]
    }
  ]
})

export default router
